// tab切换的面向对象开发的插件
class Tab{
    constructor(obj){
      this.obj=obj; 
      this.divsEle=null; //所有的div
      this.lisEle=null; //所有的li
      this.init();
    }
    init(){
      this.initWrap()
      this.initNav();
      this.initDivs();
      this.tabChange()
    }
    initWrap(){//初始化外套样式
      let {id,wrapStyle}=this.obj;
        //  给tab的外套加样式
       let wrap=document.getElementById(id)
       wrap.style.width=wrapStyle.width||'600px';
        wrap.style.height=wrapStyle.height||'500px';
        wrap.style.background=wrapStyle.background||'skyblue';
    }
    initNav(){ //初始化导航样式
       let {id,wrapStyle,navlist,navStyle}=this.obj;
      let wrap=document.getElementById(id)
  // 初始化导航栏
      let ul=document.createElement("ul")
      ul.style.width=wrapStyle.width;
      ul.style.height=navStyle.height||"60px";
      ul.style.background=navStyle.navBackground||'skyblue';
      ul.style.display="flex";
      ul.style.justifyContent="space-between";
      for(let i=0;i<navlist.length;i++){
        let li=document.createElement("li")
        li.style.width="100px";
        li.style.height=navStyle.height||"60px";
        li.style.height=navStyle.height||"60px";
        li.style.background=navStyle.liBack||'blue';
        li.style.color=navStyle.liColor||'white';
        li.style.textAlign="center";
        li.style.lineHeight=navStyle.height||"60px";
        li.style.cursor="pointer"
        li.innerHTML=navlist[i];
        if(i==0){ //激活样式
            li.style.background="green";
            li.style.color="white";
        }
        ul.appendChild(li)
      }
      let canzhao=wrap.querySelector("div");
      wrap.insertBefore(ul,canzhao)
      // 存储所有的li到this上
      this.lisEle=wrap.querySelectorAll("li");
   
    }
    initDivs(){ //初始化div的样式
        let {id}=this.obj;
       let wrap=document.getElementById(id)
       let divs=wrap.querySelectorAll("div");
      this.divsEle=divs; //存储所有divs
       for(let i=0;i<divs.length;i++){
        divs[i].style.display="none"
       }
       divs[0].style.display="block"
    }
    tabChange(){ //tab 切换的功能
        //  console.log(this.lisEle)
      let {navStyle}=this.obj;
      // 给所有的li绑定点击事件
      var that=this;
      for(let i=0;i<this.lisEle.length;i++){
        this.lisEle[i].onclick=function () {
            // 所有的li 设置默认样式
            for(let j=0;j<that.lisEle.length;j++){
              that.lisEle[j].style.background=navStyle.liBack;
              that.lisEle[j].style.color=navStyle.liColor;
              // 所有的div 隐藏
              that.divsEle[j].style.display="none"
            }
            // 当前点击的li设置成激活样式
            this.style.background="green";
            this.style.color="white";
            // 当前点击的div显示
            that.divsEle[i].style.display="block";
        }
      }
    
    }
}